<template>
	<div id="app">
		<v-header :seller="seller"></v-header>
		<div class="tab-wrapper">
			<tab :tabs="tabs"></tab>
		</div>
	</div>
</template>

<script>
	import vHeader from 'components/v-header/v-header'
	import Goods from 'components/goods/Goods'
	import Evalute from 'components/evalute/Evalute'
	import Business from 'components/business/Business'
	import Tab from 'components/tab/Tab'
	import { getSeller } from 'api'

	export default {
		name: 'app',
		data() {
			return {
				seller: {}
			}
		},
		computed: {
			tabs() {
				return [
					{
						label: '商品',
						component: Goods,
						data: {
							seller: this.seller
						}
					},
					{
						label: '评价',
						component: Evalute,
						data: {
							seller: this.seller
						}
					},
					{
						label: '商家',
						component: Business,
						data: {
							seller: this.seller
						}
					},
				]
			}
		},
		methods: {
			_getSeller() {
				getSeller().then((seller) => {
					this.seller = seller
				})
			}
		},
		mounted() {
			this._getSeller()
		},
		components: {
			vHeader,
			Tab
		}
	}
</script>
<style lang="stylus" scoped>
	.tab-wrapper
		position: fixed
		top: 134px
		left: 0
		right: 0
		bottom: 0
</style>
